<template>
  <div style="width: 100vw; height: 100vh; background-color: rgb(242, 247, 251);">
    <el-row :gutter="0">
      <el-col :span="5"></el-col>
      <el-col :span="14">
        <div class="container">
          <div class="card">
            <div class="left">
              <span style="color: white; font-size: 15px; font-family: '华文新魏'">家庭医生后台管理系统</span>
              <img src="/img/login/login.png" alt="" style="display: block; margin: calc(50% - 120px) auto 0;">
            </div>
            <div class="right" style="display: flex; align-items: center;">
              <el-form v-if="loginType === 'account'" style="margin: 0 auto; width: 350px;">
                <el-form-item>
                  <img src="/img/login/welcome.jpg" alt="" width="45px" height="45px">
                </el-form-item>
                <el-form-item>
                  <span style="color: black; font-size: 30px; font-family: '华文新魏'">欢迎登录</span>
                </el-form-item>
                <el-form-item>
                  <el-input placeholder="请输入账号" v-model="user.account" style="margin-top: 30px"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="isAgreed">我已阅读并同意<span style="color: rgb(24, 119, 242)">《用户隐私政策》</span></el-checkbox>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="login1" style="width: 100%" size="large">登录</el-button>
                </el-form-item>
                <el-form-item>
                  <span style="color: gray; font-size: 12px; font-family: '华文新魏'">忘记密码请联系管理员</span>
                </el-form-item>
                <el-form-item>
                  <el-link type="primary" @click="switchToPhoneLogin">手机号验证码登录</el-link>
                </el-form-item>
              </el-form>
              <el-form v-if="loginType === 'phone'" style="margin: 0 auto; width: 350px;">
                <el-form-item>
                  <img src="/img/login/welcome.jpg" alt="" width="45px" height="45px">
                </el-form-item>
                <el-form-item>
                  <span style="color: black; font-size: 30px; font-family: '华文新魏'">欢迎登录</span>
                </el-form-item>
                <el-form-item>
                  <el-input placeholder="请输入手机号码" v-model="user.phone" style="margin-top: 30px"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input placeholder="请输入验证码" v-model="user.code" style="width: 65%;margin-right: 15px"></el-input>
                  <el-button type="primary" @click="sendVerificationCode" :disabled="countdown > 0" style="width: 30%; height: 45px">
                    {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="isAgreed">我已阅读并同意<span style="color: rgb(24, 119, 242)">《用户隐私政策》</span></el-checkbox>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="login2" style="width: 100%" size="large">登录</el-button>
                </el-form-item>
                <el-form-item>
                  <span style="color: gray; font-size: 12px; font-family: '华文新魏'">忘记密码请联系管理员</span>
                </el-form-item>
                <el-form-item>
                  <el-link type="primary" @click="switchToAccountLogin">账号密码登录</el-link>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="5"></el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from "element-plus";
import router from "@/router";
import axios from "axios";

const user = ref({
  account: '',
  password: '',
  phone: '',
  code: ''
})

const isAgreed = ref(false)
const loginType = ref('account')
const countdown = ref(0)

const login1 = () => {
  if (!isAgreed.value) {
    ElMessage.error('请先同意隐私政策');
    return;
  }
  const userpwd = ref({});
  userpwd.value.phone = user.value.account;
  userpwd.value.password = user.value.password;
  axios.post(BASE_URL + '/hhmc/user/login', userpwd.value)
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success('登录成功!');
          localStorage.setItem('user', JSON.stringify(response.data.data));
          // 延迟
          setTimeout(() => {
            router.push('/main');
          }, 1000);
        } else {
          ElMessage.error(response.data.msg);
          user.value = {};
        }
      })
}

const login2 = () => {
  if (!isAgreed.value) {
    ElMessage.error('请先同意隐私政策');
    return;
  }


  router.push('/main');
}

const sendVerificationCode = () => {
  if (!user.value.phone) {
    ElMessage.error('请输入手机号码');
    return;
  }

  // 手机号合法性验证
  const phoneRegex = /^1[3-9]\d{9}$/;
  if (!phoneRegex.test(user.value.phone)) {
    ElMessage.error('请输入有效的手机号码');
    return;
  }

  // 启动倒计时
  startCountdown();
  ElMessage.success('验证码已发送!');

  axios.post(BASE_URL + '/send', { phone: user.value.phone })
      .then((response) => {
        if (response.data.code != 2000) {
          ElMessage.error(response.data.msg);
        }
      })
      .catch(() => {

      });
}

const switchToPhoneLogin = () => {
  loginType.value = 'phone';
  user.value = { account: '', password: '', phone: '', code: '' };
  countdown.value = 0; // 重置倒计时
}

const switchToAccountLogin = () => {
  loginType.value = 'account';
  user.value = { account: '', password: '', phone: '', code: '' };
  countdown.value = 0; // 重置倒计时
}

const startCountdown = () => {
  countdown.value = 60;
  const interval = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(interval);
    }
  }, 1000);
}
</script>

<style scoped>
* {
  font-size: 15px;
  font-family: "华文新魏", "幼圆";
}

.container {
  display: flex;
  height: 100vh;
  align-items: center;
}

.card {
  display: flex;
  width: 100%;
  height: 70%;
  border-radius: 10px;
  overflow: hidden;
}

.left, .right {
  flex: 1; /* 左右两块大小相等 */
}

.left {
  background-color: rgb(41, 132, 248); /* 左侧背景颜色 */
  padding: 30px;
}

.right {
  background-color: white; /* 右侧背景颜色 */
  padding: 30px;
}

:deep(.el-form .el-form-item) {
  width: 100%;
  .el-form-item__content {
    display: flex;
    justify-content: center;
  }
}

:deep(.el-form .el-input) {
  .el-input__inner {
    border: 0;
    height: 45px;
  }
}
</style>
